// 模版引擎：更方便地在html中插入js变量和一些简单的逻辑操作，比如for循环if判断
// react为了解决html和js代码混用的情况，推出了jsx，vue中的template、es6中的模版字符串
// jsx语法：
// 1、React组件最外层只能是一个标签包裹，我们通常使用Fragement虚拟标签来解决，简写为<></>
// 2、jsx中渲染动态数据一律是通过一对花括号来渲染
// 3、标签的属性以及样式名一律用小驼峰命名法不能使用中划线
// 4、props是父组件传递给子组件的数据，该数据在子组件里是不能直接修改的，也就是只读
// 5、花括号可以写表达式、变量、数学运算、三元、方法（map等）
interface Info {
  name: string;
  age: number;
}

const user: Info = {
  name: "jay",
  age: 18,
};
function Demo1({ person = { name: "joLin" } }) {
  return (
    <>
      <h2>我是自定义组件Demo1</h2>
      <i>
        我叫{user.name},我今年{user.age}了
      </i>
      <div>
        接收父组件传递的数据:
        {person.name}
      </div>
    </>
  );
}
export default Demo1;
